<template>
	<view>
		<view class="scroll_items">
			<text class="title_text">{{itemdata.title}}</text>
			<text class="title_detail">{{itemdata.title_detail}}</text>
			<image class="head_image" :src="itemdata.headurl"> </image>
			<text class="title_name">{{itemdata.playername}}</text>
			<image class="tiem_icon" :src="time_icon"> </image>
			<text class="time_text">{{itemdata.pushtime}}</text>
			<text class="nums_text">{{itemdata.lovesvalue}}</text>
			<image class="star-five " :src="love_icon" v-if="itemdata.isMylove" @click="islove"> </image>
			<image class="star-five " :src="love_icon2" @click="islove" v-else> </image>
			<view class="line_icon"> </view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "skill-item",
		data() {
			return {
				love_icon: "https://jianxia.mazhoudao.com/h5/static/dating/love.png",
				love_icon2: "https://jianxia.mazhoudao.com/h5/static/dating/unlove.png",
				time_icon: "https://jianxia.mazhoudao.com/h5/static/home/jineng/jineng-add.png",
			};
		},
		props: {
			itemdata: {
				type: Object,
				default () {
					return {
						title: "装备组合",
						title_detail: "60级 健吾当",
						headurl: "https://jianxia.mazhoudao.com/h5/static/home/jineng/jineng-add.png",
						pushtime: "2021-10-19",
						playername: "大爷大爷大爷大爷大爷大爷",
						lovesvalue: 0,
						isMylove: false
					}
				}
			},
			index: 
			{
				type: Number,
				default:0
			}
		},
		methods: {
			islove() { //门派
				this.$emit('islove', [this.index,this.itemdata.isMylove])
				if(this.itemdata.isMylove){
					this.itemdata.lovesvalue=this.itemdata.lovesvalue-1
				}else
				{
					this.itemdata.lovesvalue=this.itemdata.lovesvalue+1
				}
				this.itemdata.isMylove = !this.itemdata.isMylove
			}
		}
	}
</script>

<style scoped>
	.scroll_items {
		float: left;
		margin-top: 10rpx;
	}

	.scroll_items {
		height: 232rpx;
		padding-left: 30rpx;
	}

	.title_text {
		float: left;
		width: 100%;
		font-size: 35rpx;
		color: #57BEF2;
		font-weight: 800;
	}

	.title_detail {
		float: left;
		width: 100%;
		font-size: 30rpx;
		margin-top: 10rpx;
		font-weight: 600;
	}

	.head_image {
		float: left;
		width: 50rpx;
		height: 50rpx;
		margin-top: 20rpx;
		border-radius: 25rpx;
	}

	.title_name {
		float: left;
		font-size: 28rpx;
		height: 80rpx;
		margin-left: 20rpx;
		line-height: 80rpx;
		text-align: left;
		width: 90%;
		color: #808080;
	}

	.tiem_icon {
		float: left;
		width: 30rpx;
		height: 30rpx;
		margin-top: 10rpx;
	}

	.time_text {
		float: left;
		font-size: 22rpx;
		margin: 8rpx;
		color: #808080;
	}

	.line_icon {
		float: left;
		width: 90%;
		height: 1rpx;
		background-color: #DDDDDD;
		margin-top: 10rpx;
	}

	.star-five {
		height: 30rpx;
		width: 30rpx;
		margin-right: 10rpx;
		float: right;
		z-index: 1;
	}

	.nums_text {
		float: right;
		color: #808080;
		font-size: 22rpx;
		height: 80rpx;
		line-height: 35rpx;
		text-align: center;
		margin-right: 30rpx;
	}
</style>
